<template>
    <div id="task-allot" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;">
            <div style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item label="选择分配对象：">
                            <el-select 
                                filterable 
                                class="m-2" 
                                v-model="searchVal"
                                placeholder="请选择分配对象：" 
                                @change="searchChange"
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item style="min-width: 18vw;">
                            <template v-if="searchVal === 0">
                                <el-select 
                                    filterable 
                                    multiple
                                    collapse-tags
                                    v-model="planVal" 
                                    placeholder="请选择用户" 
                                    value-key='id'
                                    @change="planChange"
                                >
                                    <el-option
                                        v-for="item in planOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item"
                                    />
                                </el-select>
                            </template>
                            
                            <template v-if="searchVal === 1">
                                <el-select 
                                    filterable 
                                    multiple
                                    collapse-tags
                                    v-model="planVal" 
                                    placeholder="请选择班组" 
                                    value-key='n_Id'
                                    @change="planChange"
                                >
                                    <el-option
                                        v-for="item in planOption"
                                        :key="item.n_Id"
                                        :label="item.v_TeamName"
                                        :value="item"
                                    />
                                </el-select>
                            </template>
                            
                            <template v-if="searchVal === 2">
                                <el-select 
                                    filterable 
                                    multiple
                                    collapse-tags
                                    v-model="planVal" 
                                    placeholder="请选择岗位" 
                                    value-key='id'
                                    @change="planChange"
                                >
                                    <el-option
                                        v-for="item in planOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item"
                                    />
                                </el-select>
                            </template>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;height: calc(100vh - 240px);">
                    <el-card class="box-card w-h-100" shadow="never">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <GetData 
                                        :tabData="tabData"
                                    ></GetData>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw, reactive , toRefs , watch , onMounted , nextTick , watchEffect } from 'vue';
import { ElCol,FormRules, ElForm, ElRow } from 'element-plus';
import { getFun } from '../getData';
import GetData from '../getData.vue';
export default defineComponent( {
    name: 'task-allot',
    components: { GetData },
    props: {
        taskInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const searchVal = ref(0);
        const planVal = ref();
        const planOption: any = ref([]);
        let stateVal = 0;
        const tabData = ref('');
        let getHeader: any = [];
        const transferVal = ref('');
        let isExecute = false;

        /*** 选择对象的改变方式 */
        const planChange = (val: any) => {
            let param: any = {};
            param.headerVal = getHeader;
            param.bodayVal = val;
            tabData.value = JSON.stringify(param);
            transferVal.value = JSON.stringify(val);
        }

        /*** 分配方式改变事件 */
        const searchChange = (val: any) => {
            searchVal.value = val;
            tabData.value = '';
            getHeader = [];
            planOption.value = [];
            planVal.value = '';
            transferVal.value = '';
            getTabFun(val);
        }
        /*** 获取数据信息 */
        const getTabFun = async(val: Number) => {
            let getInfo = getFun(val);
            getInfo.then((res: any) => {
                let param: any = {};
                getHeader = res.headerVal;
                planOption.value = res.bodayVal;
                param.headerVal = getHeader;
                param.bodayVal = [];
                tabData.value = JSON.stringify(param);
                isExecute = true;
            })
        }

        watch(() => transferVal.value, (newVal) => {
            ctx.emit('transferInfo', newVal, searchVal.value)
        })

        /*** 回显数据 */
        const echoInfoFun = (arr: Array<any>) => {
            let item = toRaw(planOption.value);
            let setVal: any = [];
            let param: any = {};
            let filteredData: any = [];
            if(stateVal === 0){
                arr.map((val: any) => {
                    setVal.push(val.l_UserId.toString());
                });
                filteredData = item.filter((i: any) => setVal.includes(i.id));
            }
            if(stateVal === 1){
                arr.map((val: any) => {
                    setVal.push(val.l_TeamGroupId);
                });
                filteredData = item.filter((i: any) => setVal.includes(i.n_Id));
            }
            if(stateVal === 2){
                arr.map((val: any) => {
                    setVal.push(val.l_PosId);
                });
                filteredData = item.filter((i: any) => setVal.includes(i.id));
            }
            if(filteredData.length !== ''){
                planVal.value = filteredData;
                param.headerVal = getHeader;
                param.bodayVal = filteredData;
                tabData.value = JSON.stringify(param);
                transferVal.value = JSON.stringify(filteredData);
            }
        }

        onMounted(() => {
            nextTick(async() => {
                isExecute = false;
                transferVal.value = '';
                if(props.taskInfo !== ''){
                    let setTimes = setInterval(async () => {
                        let getInfo = JSON.parse(props.taskInfo);
                        if(getInfo.smsipPlanUsers.length !== 0){
                            stateVal = 0;
                            searchVal.value = 0;
                            await getTabFun(0);
                            let getStatus = setInterval(() => {
                                if(isExecute){
                                    echoInfoFun(getInfo.smsipPlanUsers);
                                    clearInterval(getStatus);
                                }
                            },10);
                        }

                        if(getInfo.smsipPlanTeamGroups.length !== 0){
                            stateVal = 1;
                            searchVal.value = 1;
                            await getTabFun(1);
                            let getStatus = setInterval(() => {
                                if(isExecute){
                                    echoInfoFun(getInfo.smsipPlanTeamGroups);
                                    clearInterval(getStatus);
                                }
                            },10);
                        }

                        if(getInfo.smsipPlanPoss.length !== 0){
                            stateVal = 2;
                            searchVal.value = 2;
                            await getTabFun(2);
                            let getStatus = setInterval(() => {
                                if(isExecute){
                                    echoInfoFun(getInfo.smsipPlanPoss);
                                    clearInterval(getStatus);
                                }
                            },10);
                        }
                        clearInterval(setTimes);
                    },20);
                }else{
                    getTabFun(stateVal);
                }
            });
        })
        return {
            searchChange,
            searchOptions: [
                {label: '用户', value: 0},
                {label: '班组', value: 1},
                {label: '岗位', value: 2},
            ],
            searchVal,
            planVal,
            planChange,
            planOption,
            tabData,
        }
    },
})
</script>
<style scoped lang="scss">
:deep(.el-form-item){
    margin-bottom: 0px!important;
}
:deep(.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type){
    margin-bottom: 0px!important;
}
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>
